<div id="buscador_1">


	<div id="buscador_1_1">
		<img src="image/imagesBuscador/pestana.png" alt="" />
		<div id="tabs" >
			<a href="#tab-rapida" class="htabs1">Rapida</a> <a href="#tab-avanzada"class="htabs1">Avanzada</a>
		</div>


		<form action="#" method="get" enctype="multipart/form-data" id="formBuscador">

			<!-- 		BUSQUEDA RAPIDA	-->
			<div id="tab-rapida">
				<p style="margin-top:50px">Busca tu producto aqui:</p>
				<table>
				   <tr>   
				   	<td><input type="text" name="nombreProducto" placeholder="Busca aqui tu producto" value="" width="600px" />  </td>
				   	<td><div class="buttons">
						<a   id="idBusquedaRapida" onClick="buscarProducto();" >Buscar</a>
					</div></td>
				   </tr>
				    
				   
				</table>
                 
				
			


			</div>
			
			<!-- 		BUSQUEDA AVANZADA	-->
			<div id="tab-avanzada">
				<div id="tituloBusquedaAvanzada">
					<p style="margin-top:50px">Busca tu producto por sus caracteristicas</p>
			     </div>
				<table class="form">
					
					<tr>
					   		<td>Tipo de producto:</td>
						      <td>
						      	<select id="tipo_producto" name="tipo_producto">
						      
										<option value="0" selected="selected">---Seleccione---</option>
										<?php foreach ($tipos_productos as $tipo_producto) { ?>
						                 <option value="<?php echo $tipo_producto['category_id']; ?>"><?php echo $tipo_producto['name']; ?></option>
						              <?php } ?>
							    </select>
							   </td>
					</tr>
					
					<tr>
					   		<td>Sub Categoria:</td>
						      <td>
						      	<select id="marcaSubcategoria" name="marcaSubcategoria">
						      
										<option value="0" selected="selected">---Seleccione---</option>
							    </select>
							   </td>
					</tr>
						
						
					<tr>
				      <td>Marca:</td>
					  <td>
					      	<select id="marcaProducto" name="marcaProducto">
					      
									<option value="0" selected="selected">---Seleccione---</option>
						    </select>
					  </td>
				   
				   </tr>		
				   <tr>
				      <td>Modelo:</td>
					  <td>
					      	<select id="modeloProducto" name="modeloProducto">
					      
									<option value="0" selected="selected">---Seleccione---</option>
						    </select>
					  </td>
				   
				   </tr>
					
					
					
					<tr>
						<td>A&ntilde;o:</td>
						<td><select id="anioMin" name="anioMin">
								<option value="0" selected="selected">Min A&ntilde;o</option>
										<?php foreach ($anios as $anio) { ?>
						                 <option
									value="<?php echo $anio['anios_produccion_id']; ?>"><?php echo $anio['descripcion_anios_produccion']; ?></option>
						              <?php } ?>
				                 
							    </select></td>
							    

					</tr>

					<tr>
						<td>&nbsp;</td>
						<td><select id="anioMax" name="anioMax">
								<option value="0" selected="selected">Max A&ntilde;o</option>
										<?php foreach ($anios as $anio) { ?>
						                 <option
									value="<?php echo $anio['anios_produccion_id']; ?>"><?php echo $anio['descripcion_anios_produccion']; ?></option>
						              <?php } ?>
				                 
							    </select></td>
					</tr>

					<tr>
						<td>Precio:</td>
						<td>
							<select id="precioMin" name="precioMin">
									<option value="0" selected="selected">Precio Min</option>
									<option value="10000.0000">10,000</option>
									<option value="50000.00000">50,000</option>
									<option value="75000.0000">75,000</option>
									<option value="100000.0000">100,000</option>
									<option value="125000.0000">125,000</option>
									<option value="150000.0000">150,000</option>
									<option value="175000.0000">175,000</option>
									<option value="200000.0000">200,000</option>
									<option value="225000.0000">225,000</option>
									<option value="250000.0000">250,000</option>
									<option value="275000.0000">275,000</option>
									<option value="300000.0000">300,000</option>
									<option value="325000.0000">325,000</option>
									<option value="350000.0000">350,000</option>
									<option value="375000.0000">375,000</option>
									<option value="400000.0000">400,000</option>
									<option value="425000.0000">425,000</option>
									<option value="450000.0000">450,000</option>
									<option value="475000.0000">475,000</option>
									<option value="500000.0000">500,000</option>
									<option value="5000000.0000">+</option>	
							</select>
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>
							<select id="precioMax" name="precioMax">
									<option value="0" selected="selected">Precio Min</option>
									<option value="10000.0000">10,000</option>
									<option value="50000.00000">50,000</option>
									<option value="75000.0000">75,000</option>
									<option value="100000.0000">100,000</option>
									<option value="125000.0000">125,000</option>
									<option value="150000.0000">150,000</option>
									<option value="175000.0000">175,000</option>
									<option value="200000.0000">200,000</option>
									<option value="225000.0000">225,000</option>
									<option value="250000.0000">250,000</option>
									<option value="275000.0000">275,000</option>
									<option value="300000.0000">300,000</option>
									<option value="325000.0000">325,000</option>
									<option value="350000.0000">350,000</option>
									<option value="375000.0000">375,000</option>
									<option value="400000.0000">400,000</option>
									<option value="425000.0000">425,000</option>
									<option value="450000.0000">450,000</option>
									<option value="475000.0000">475,000</option>
									<option value="500000.0000">500,000</option>
									<option value="5000000.0000">+</option>	
							</select>
						</td>
				   </tr>						

					<tr>
					  <td><a  id="idBusquedaAvanzada"onClick="busquedaAvanzadaProducto();" class="buttons">Buscar</a></td>

					
					</tr>	
						


				</table>
			

			</div>



		</form>
		


	</div>
</div>

<script type="text/javascript">
$('#tabs a').tabs(); 
</script>
<script type="text/javascript">

$( document ).ready(function() {
	
	
	


$('select[name=\'tipo_producto\']').bind('change', function() {

	
	
	
	
	$.ajax({
		url: 'index.php?route=module/buscador/obtenermarcassubcategoria&category_id=' + this.value,
		dataType: 'json',
		beforeSend: function() {
			$('select[name=\'tipo_producto\']').after('<span class="wait">&nbsp;<img src="view/image/loading.gif" alt="" /></span>');
			$('#marcaSubcategoria option[value=0]').attr('selected','selected');
			$('#marcaProducto option[value=0]').attr('selected','selected');
			$('#modeloProducto option[value=0]').attr('selected','selected');
		},
		complete: function() {
			$('.wait').remove();
		},			
		success: function(json) {
			
			
			html = '<option value="">---Seleccione---</option>';
			
			  console.log("Longitud JSON:"+ json.length);
				for (i = 0; i < json.length; i++) {					
					
	        			html += '<option value="' + json[i]['category_id'] + '"';	
					
	    			html += '>' + json[i]['name'] + '</option>';
				}
			
			
			$('select[name=\'marcaSubcategoria\']').html(html);
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$('select[name=\'tipo_producto\']').trigger('change');

//Select dinamico para las Marcas en base a la subcategoria elegida(Nuevo, Usados)
$('select[name=\'marcaSubcategoria\']').bind('change', function() {
	$.ajax({
		url: 'index.php?route=module/buscador/obtenermarcassubcategoria&category_id=' + this.value,
		dataType: 'json',
		beforeSend: function() {
			$('select[name=\'marcaSubcategoria\']').after('<span class="wait">&nbsp;<img src="view/image/loading.gif" alt="" /></span>');
		},
		complete: function() {
			$('.wait').remove();
		},			
		success: function(json) {
			
			
			html = '<option value="0">---Seleccione---</option>';
			
			  //console.log("Longitud JSON:"+ json.length);
				for (i = 0; i < json.length; i++) {					
					
	        			html += '<option value="' + json[i]['category_id'] + '"';	
					
	    			html += '>' + json[i]['name'] + '</option>';
				}
			
			
			$('select[name=\'marcaProducto\']').html(html);
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});


$('select[name=\'marcaSubcategoria\']').trigger('change');

//Select dinamico para las Marcas en base a la subcategoria elegida(Nuevo, Usados)
$('select[name=\'marcaProducto\']').bind('change', function() {
	$.ajax({
		url: 'index.php?route=module/buscador/obtenermarcassubcategoria&category_id=' + this.value,
		dataType: 'json',
		beforeSend: function() {
			$('select[name=\'marcaProducto\']').after('<span class="wait">&nbsp;<img src="view/image/loading.gif" alt="" /></span>');
		},
		complete: function() {
			$('.wait').remove();
		},			
		success: function(json) {
			
			
			html = '<option value="">---Seleccione---</option>';
			
			  //console.log("Longitud JSON:"+ json.length);
				for (i = 0; i < json.length; i++) {					
					
	        			html += '<option value="' + json[i]['category_id'] + '"';	
					
	    			html += '>' + json[i]['name'] + '</option>';
				}
			
			
			$('select[name=\'modeloProducto\']').html(html);
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

});




</script>


<!-- <link type="text/css" media="all" rel="stylesheet" href="catalog/view/theme/default/buscador/style.css"></link> -->